<template>
	<div>
		<!-- 选项卡  -->
		<div class="tabs bgwhite">
			<el-tabs v-model="active" @tab-click="changeTab">
				<el-tab-pane
					:label="item.label"
					:name="item.value"
					v-for="item in tabs"
					:key="item.label">
				</el-tab-pane>
			</el-tabs>
		</div>
		<!-- 过滤条件 -->
		<div class="filter bgwhite filter flex flex-y">
			<search
				style="width:220px;"
				class="right20"
				tip="请输入关键字"
				@searchOK="searchOK">
			</search>
			<div class="flex flex-y right20" v-if="active == '1'">
				<div class="right10">发布日期</div>
				<el-date-picker
					style="width:250px"
					v-model="date"
					type="daterange"
					range-separator="-"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					value-format="timestamp">
				</el-date-picker>
			</div>
		</div>
		<!-- main -->
		<div class="main flex">
			<div class="right">
				<!-- 文章 -->
				<art :search="search" :date="date" @changeTotal="getTabNumber" v-if="active == '1'"></art>
				<!-- 提问 -->
				<ask :search="search" @changeTotal="getTabNumber" v-if="active == '2'"></ask>
				<!-- 回复 -->
				<reply :search="search" @changeTotal="getTabNumber" v-if="active == '3'"></reply>
				<!-- 动态 -->
				<msg :search="search" @changeTotal="getTabNumber" v-if="active == '4'"></msg>
				<!-- 评论 -->
				<comment :search="search" @changeTotal="getTabNumber" v-if="active == '5'"></comment>
			</div>
		</div>
	</div>
</template>

<script>
import search from '@/components/public/search/search'
import art from '@/components/content/article' //文章
import ask from '@/components/content/ask' //提问
import reply from '@/components/content/reply' //回复
import msg from '@/components/content/msg' //动态
import comment from '@/components/content/comment' //动态
export default {
	components:{
		search,
		art,
		ask,
		reply,
		msg,
		comment
	},
	data () {
		return {
			//选项卡
			active:'1',
			tabs:[
				{
					value:'1',
					label:"文章"
				},
				{
					value:'2',
					label:"提问"
				},
				{
					value:'3',
					label:"回答"
				},
				{
					value:'4',
					label:"动态"
				},
				{
					value:'5',
					label:"评论"
				},
			],

			//过滤条件
			search:"",
			date:[],
			//导航
			menuIndex:0,
		}
	},
	methods:{
		//搜索
		searchOK:function(e){
			this.search = e;
		},
		//获取选项卡总数
		getTabNumber:function(e){
			HTTP('tabs_number')
			.then(res=>{
				if(res.code == 200){
					this.tabs[0].label = `文章（${res.data.articleCounts}）`;
					this.tabs[1].label = `提问（${res.data.questionCounts}）`;
					this.tabs[2].label = `回答（${res.data.answerCounts}）`;
					this.tabs[3].label = `动态（${res.data.dynamicCounts}）`;
					this.tabs[4].label = `评论（${res.data.commentCounts}）`;
				}
			})
		},
		//改变选项卡
		changeTab:function(){
			sessionStorage.setItem("labourIndex",this.active);
		}
	},
	mounted(){
		//缓存选项卡下标
		if(sessionStorage.labourIndex){
			this.active = sessionStorage.labourIndex;
		}
		this.getTabNumber();
	}
}
</script>

<style lang="scss" scoped>
	//选项卡
	.tabs{
		padding:0 0 5px 52px
	}
	/deep/ .el-tabs__nav-wrap::after{
		background-color: #fff;
	}
	//过滤条件
	.filter{
		padding: 5px 44px 25px 44px;
		background-color: #fff;
	}
	//main
	.main{
		background-color: #fff;
		margin-top: 10px;
		padding: 30px 0;
		//右
		.right{
			width: 100%;
			margin: 0 30px;
		}
	}
</style>
